<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="eid">
        <el-input v-model="searchMap.eid" placeholder="员工编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="ename">
        <el-input v-model="searchMap.ename" placeholder="员工姓名"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="ephone">
        <el-input v-model="searchMap.ephone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="edepartment">
        <el-input
          v-model="searchMap.edepartment"
          placeholder="所属部门"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>员工编号：</span>
              <span>{{ props.row.eid }}</span>
            </el-form-item>
            <el-form-item>
              <span>员工姓名：</span>
              <span>{{ props.row.ename }}</span>
            </el-form-item>
            <el-form-item>
              <span>联系电话：</span>
              <span>{{ props.row.ephone }}</span>
            </el-form-item>
            <el-form-item>
              <span>所属部门：</span>
              <span>{{ props.row.edepartment }}</span>
            </el-form-item>
            <el-form-item>
              <span>薪资：</span>
              <span>{{ props.row.esalary }}元/月</span>
            </el-form-item>
            <el-form-item>
              <span>入职时间：</span>
              <span>{{ props.row.ehiredate }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="员工编号" prop="eid"> </el-table-column>
      <el-table-column label="员工姓名" prop="ename"> </el-table-column>
      <el-table-column label="所属部门" prop="edepartment"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.eid)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.eid, scope.row.ename)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增员工" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="员工姓名" prop="ename" style="height: 36px">
          <el-input v-model="pojo.ename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ephone" style="height: 36px">
          <el-input v-model="pojo.ephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资" prop="esalary" style="height: 36px">
          <el-input v-model="pojo.esalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="edepartment" style="height: 10px">
          <el-select v-model="pojo.edepartment" placeholder="请选择所属部门">
            <el-option label="人事部" value="人事部"></el-option>
            <el-option label="行政部" value="行政部"></el-option>
            <el-option label="研发部" value="研发部"></el-option>
            <el-option label="宣传部" value="宣传部"></el-option>
            <el-option label="配送部" value="配送部"></el-option>
            <el-option label="培训部" value="培训部"></el-option>
            <el-option label="财务部" value="财务部"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneStaff('pojo')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑员工信息"
      width="460px"
      :visible.sync="dialogFormVisible2"
    >
      <el-form
        :rules="rules"
        ref="pojoEdit"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="员工姓名" prop="ename" style="height: 36px">
          <el-input v-model="pojoEdit.ename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ephone" style="height: 36px">
          <el-input v-model="pojoEdit.ephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资" prop="esalary" style="height: 36px">
          <el-input v-model="pojoEdit.esalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="edepartment" style="height: 10px">
          <el-select
            v-model="pojoEdit.edepartment"
            placeholder="请选择所属部门"
          >
            <el-option label="人事部" value="人事部"></el-option>
            <el-option label="行政部" value="行政部"></el-option>
            <el-option label="研发部" value="研发部"></el-option>
            <el-option label="宣传部" value="宣传部"></el-option>
            <el-option label="配送部" value="配送部"></el-option>
            <el-option label="培训部" value="培训部"></el-option>
            <el-option label="财务部" value="财务部"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveOneStaff('pojoEdit')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import staffApi from "@/api/staff";
export default {
  data() {
    return {
      list: [],
      searchMap: {
        eid: "",
        ename: "",
        ephone: "",
        edepartment: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pojo: {
        ename: "",
        ephone: "",
        esalary: "",
        edepartment: "",
      },
      pojoEdit: {
        eid: "",
        ename: "",
        ephone: "",
        esalary: "",
        edepartment: "",
      },
      rules: {
        ename: [
          { required: true, message: "员工姓名不能为空", trigger: "blur" },
        ],
        edepartment: [
          { required: true, message: "部门类型不能为空", trigger: "change" },
        ],
        ephone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        esalary: [{ required: true, message: "薪资不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      staffApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    handleEdit(eid) {
      staffApi.getOneStaff(eid).then((response) => {
        this.pojoEdit.eid = response.data[0].eid;
        this.pojoEdit.ename = response.data[0].ename;
        this.pojoEdit.ephone = response.data[0].ephone;
        this.pojoEdit.esalary = response.data[0].esalary;
        this.pojoEdit.edepartment = response.data[0].edepartment;
        
      })
      this.dialogFormVisible2 = true;
    },
    saveOneStaff(fromName){
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          staffApi.editOneStaff(this.pojoEdit).then((response) => {
            this.fetchData();
            this.dialogFormVisible2 = false;
          });
        } else {
        }
      });
    },
    handleDelete(eid, ename) {
      this.$confirm("此操作将永久删除" + ename + ", 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          staffApi.deleteOneStaff(eid).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneStaff(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          staffApi.addOneStaff(this.pojo).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible = false;
          });
        } else {
        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
}
.items1 {
  width: 140px;
}
.items2 {
  width: 110px;
}
.items3 {
  width: 130px;
}
.items4 {
  width: 110px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>